/**
 * Created by James on 2017/6/8.
 */
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require("html-webpack-plugin");
var CopyWebpackPlugin = require("copy-webpack-plugin");
var CleanWebpackPlugin = require("clean-webpack-plugin");

var webpack = require('webpack');
var path = require('path');


var config = {
    rootPath: path.resolve(__dirname),                  // 项目根目录
    buildPath: path.join(this.rootPath, 'build'),   // 打包文件目录
    srcPath: path.join(this.rootPath, 'src'),       // 源码目录
    viewPath: path.join(this.rootPath, 'views'),    // 视图模板目录
    staticPath: "/asserts",                         // 高度静态文件目录
    scripts: path.join(this.srcPath, 'scripts'),    // js脚本脚本目录
    port: 8080,                                         // devServer端口
};

// 运行build环境时的ouputConfig
var outputConfig = {
    path: config.buildPath,
    publicPath: "../",
    devtool: false,
};

// 运行Dev环境时, 使用的outputConfig
if(process.env.npm_lifecycle_event == "dev"){
    outputConfig.path = "/";
    outputConfig.buildPath = "/build/";
    outputConfig.devtool = "cheap-module-eval-source-map";
};

module.exports = {
    devtool: outputConfig.devtool,
    // 多入口配置
    entry: {
        index: path.join(config.scripts, 'index.js'),
        contact: path.join(config.scripts, 'contact.js'),
        about: path.join(config.scripts, 'about.js'),
        verdors: ["react", "react-dom", "react-router-dom"],
    },
    // 输出配置
    output: {
        path: outputConfig.path,
        filename: "scripts/[name].[chunkhash:5].js",
        chunkFilename: "scripts/[name].[chunkhash:5].js",
        publicPath: outputConfig.publicPath,
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: "babel-loader",
                exclude: /node_modules/,
                query: {
                    presets: ["es2015", "react"]
                }
            },
            {
                test: /\.css$/,
                exclude: /node_modules/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                })
            },
            {
                test: /\.less$/,
                exclude: /node_modules/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: ["css-loader", "postcss-loader", "less-loader"]
                })
            },
            {
                test: /\.(jpg|png)$/,
                loader: "file-loader",
                query: {
                    name: "images/[name]-[hash:5].[ext]"
                }
            }
        ],
    },
    devServer: {
        port: config.port,
        host: "0.0.0.0",
        // historyApiFallback: true,
        inline: true,       // 实时刷新
        compress: true,     // 开启gzip
    },
    plugins: [
        new ExtractTextPlugin("css/[name].[chunkhash:5].css"),
        new CleanWebpackPlugin("build", {
            root: config.rootPath,
            verbose: false
        }),
        new CopyWebpackPlugin([
            {
                context: config.staticPath,
                from: "**/*",
                to: path.join(config.buildPath, 'static'),
                ignore: [".md"]
            }
        ]),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new HtmlWebpackPlugin({
            favicon: '',
            filename: "./views/index.html",         // 生成的html文件路径
            template: path.join(config.viewPath, "index.html"), // html模板文件路径
            inject: true,       // js插入位置 true -> head, body
            hash: false,        // 为静态资源添加hash
            chuns: ["verdors", "index"],
            minify: {
                removeComments: true,       // 移除html注释
                collapseWhitespace: true, // 删除空白与换行
            }
        }),
        new HtmlWebpackPlugin({
            favicon: '',
            filename: "./views/contact.html",         // 生成的html文件路径
            template: path.join(config.viewPath, "contact.html"), // html模板文件路径
            inject: true,       // js插入位置 true -> head, body
            hash: false,        // 为静态资源添加hash
            chuns: ["verdors", "contact"],
            minify: {
                removeComments: true,       // 移除html注释
                collapseWhitespace: true, // 删除空白与换行
            }
        }),
        new HtmlWebpackPlugin({
            favicon: '',
            filename: "./views/about.html",         // 生成的html文件路径
            template: path.join(config.viewPath, "about.html"), // html模板文件路径
            inject: true,       // js插入位置 true -> head, body
            hash: false,        // 为静态资源添加hash
            chuns: ["verdors", "about"],
            minify: {
                removeComments: true,       // 移除html注释
                collapseWhitespace: true, // 删除空白与换行
            }
        })
    ]
}